<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="${ bp }/static/img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">

</head>

<body>
<%--搜索表单--%>
<div class="layui-container">

    <form class="layui-form ">
        <div class="layui-form-item layui-input-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-input-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email"  autocomplete="off" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">日期时间</label>
            <div class="layui-input-inline">
                <input type="text" name="createTimeRange" class="layui-input" id="createTimeRange" placeholder="请选择日期时间范围">
            </div>
        </div>
        <div class="layui-form-item layui-input-inline" style="position: relative;left: 450px">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-checked " lay-submit lay-filter="search"><i class="layui-icon layui-icon-search"></i>搜索</button>
                <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-return"></i>重置</button>
            </div>
        </div>
    </form>

    <table id="table" lay-filter="table"></table>
    <%--数据表格的头部--%>
    <script type="text/html" id="head-tool">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-checked" lay-event="add"><i class="layui-icon layui-icon-add-circle-fine"></i>添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
            <button class="layui-btn layui-btn-sm layui-btn-warm" id="excelUpload"><i class="layui-icon layui-icon-upload-drag"></i>Excel导入</button>
        </div>
    </script>

    <script type="text/html" id="inline-tool">
        <%--行内工具--%>
        <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>


<!-- layui.all.js 包含layui核心库和所有组件 -->
<script src="${ bp }/static/layui/layui.all.js"></script>
<script>
    // Layui遵循模块化开发思想，所有的功能模块，原则上在使用之前都需要声明
    layui.use(['form', 'table','laydate', 'upload','layer', 'jquery'], function () {
        let form = layui.form;
        let upload = layui.upload;
        let laydate = layui.laydate;
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        //日期时间范围
        laydate.render({
            elem: '#createTimeRange'
            ,type: 'datetime'
            ,range: true
        });

        //渲染table标签
        table.render({
            //对应dom元素
            elem: '#table'
            //自定义唯一id
            , id: 'table'
            //绑定头工具栏
            ,toolbar:'#head-tool'
            , url: '${bp}/useradmin?method=list' //数据接口
            , page: true //开启分页
            , limits: [5, 10, 15]//每页显示条数
            , loading: true //显示加载图标
            , autoSort: false//禁用自动排序
            , cols: [[ //表头
                { type:'checkbox'},
                {title: '序号', type: 'numbers', width: 80},
                {field: 'username', title: '用户名'},
                {field: 'email', title: '邮箱'},
                {field: 'password', title: '密码'},
                {field: 'account', title: '余额',sort: true},
                {field: 'credit', title: '积分',sort: true},
                {
                    field: 'create_time',
                    title: '注册时间',
                    sort: true,
                    templet: '<div>{{d.create_time ===undefined ? "暂无" :(layui.util.toDateString(d.create_time,"yyyy-MM-dd HH:mm:ss"))}}</div>'

                },
                {
                    field: 'last_login_time',
                    title: '最后登录时间',
                    sort: true,
                    templet: '<div>{{d.last_login_time == undefined ? "暂无" :(layui.util.toDateString(d.last_login_time,"yyyy-MM-dd HH:mm:ss"))}}</div>'
                },
                {title: '操作',fixed: 'right', width:120, align:'center', toolbar: '#inline-tool'}

            ]],
            done:function () {
                //渲染文件上传组件
                upload.render({
                    elem: '#excelUpload' //绑定元素
                    ,url: '${bp}/useradmin?method=excelUpload' //上传接口
                    //配置允许上传的文件MIME类型
                    ,accept:'file'
                    //配置允许上传的MIME类型
                    ,acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    ,done: function(res){
                        //上传完毕回调
                        layer.msg('上传成功！即将打开Excel解析结果', {
                            time: 1000,
                            icon:1
                        }, function () {
                            //将结果excel解析结果存入sessionStorage
                            sessionStorage.setItem('excelUploadResult',JSON.stringify(res.data))
                            parent.layer.open({
                                //使用iframe打开一个窗口
                                type: 2,
                                //窗口标题
                                title:"修改用户",
                                //目标页面的地址
                                content: '${bp}/user/excelUploadResult.jsp',
                                //宽高
                                area: ['800px', '500px'],
                                //开启最大化最小化
                                maxmin:true,
                                //去除遮罩
                                shade:0
                            });
                        });
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg('上传失败', {
                            time: 1000
                        }, function () {
                            table.reload('table');
                        });
                    }
                });
            }

        });



        //监听排序事件
        table.on('sort(table)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let orderField = obj.field; //当前排序的字段名
            let orderType = obj.type; //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            table.reload('table', {
                //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                initSort: obj,
                //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                where: {
                    //排序字段
                    orderField: orderField,
                    //排序方式
                    orderType: orderType
                }
            });


        });
        //监听头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    //从父窗口打开
                    parent.layer.open({
                        //使用iframe打开一个窗口
                        type: 2,
                        //窗口标题
                        title:"添加用户",
                        //目标页面的地址
                        content: '${bp}/user/add.jsp' ,//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        //宽高
                        area: ['800px', '500px'],
                        //开启最大化最小化
                        maxmin:true,
                        //去除遮罩
                        shade:0
                    });
                    break;
                case 'delete':
                    //获取被选中行的数据
                    let checkDate = table.checkStatus('table').data;
                    //判断是否没有勾选任何内容,错误提示
                    if (checkDate.length===0){
                        layer.msg('请勾选需要删除的行',{
                            time:2000,
                            icon:2
                        });
                    }else{
                        //获取id数组
                        let ids=[];
                        checkDate.forEach((item,index)=>{
                            ids.push(item.id);
                        })
                        //确认删除
                        layer.confirm('删除后数据将不可恢复?', {icon: 6, title:'提示'}, function(index){
                            //使用ajax请求接口
                            $.ajax({
                                url:'${bp}/useradmin?method=deleteAll',
                                type:'post',
                                data:{
                                    ids:JSON.stringify(ids)
                                },
                                dataType:'json',
                                success:(result)=>{

                                    // 判断是否登录成功
                                    if (result.code === 0) {
                                        // 成功信息提示
                                        layer.msg(result.msg, {
                                            time: 1000
                                        }, function () {
                                            table.reload('table');
                                        });
                                    } else {
                                        // 错误信息提示
                                        layer.msg(result.msg, {
                                            time: 2000,
                                            icon: 2
                                        });
                                    }
                                },
                                error:()=>{
                                    console.log('请求接口错误');
                                }
                            })
                            //关闭确认框
                            layer.close(index);

                        },function(index){

                            layer.msg('已取消', {
                                time: 2000,
                                icon: 6
                            });
                            layer.close(index);
                        });


                    }
                    break;
            };
        });
        //监听行工具
        table.on('tool(table)', function(obj){
            switch(obj.event){
                case 'update':
                    //打开修改页面窗口
                    //从父窗口打开
                    parent.layer.open({
                        //使用iframe打开一个窗口
                        type: 2,
                        //窗口标题
                        title:"修改用户",
                        //目标页面的地址
                        content: '${bp}/useradmin?method=updatePage&id='+obj.data.id,
                        //宽高
                        area: ['800px', '500px'],
                        //开启最大化最小化
                        maxmin:true,
                        //去除遮罩
                        shade:0
                    });

                    break;
                case 'del':
                    let data = obj.data.id; //获得当前行数据id属性
                    //确认删除
                    //确认删除
                    layer.confirm('删除后数据将不可恢复?', {icon: 6, title:'提示'}, function(index){
                        //使用ajax请求接口
                        $.ajax({
                            url:'${bp}/useradmin?method=del',
                            type:'post',
                            data:{
                                id:data
                            },
                            dataType:'json',
                            success:(result)=>{

                                // 判断是否登录成功
                                if (result.code === 0) {
                                    // 成功信息提示
                                    layer.msg(result.msg, {
                                        time: 1000
                                    }, function () {
                                        table.reload('table');
                                    });
                                } else {
                                    // 错误信息提示
                                    layer.msg(result.msg, {
                                        time: 2000,
                                        icon: 2
                                    });
                                }
                            },
                            error:()=>{
                                console.log('请求接口错误');
                            }
                        })
                        //关闭确认框
                        layer.close(index);

                    },function(index){

                        layer.msg('已取消', {
                            time: 2000,
                            icon: 6
                        });
                        layer.close(index);
                    });
                    break;
            };
        });
        //监听查询表单提交
        form.on('submit(search)',function (data){
            //获取查询参数
            let searchParams=data.field;
            //重新加载表格
            table.reload('table',{
                //请求参数
                where: searchParams,
                //查询之后，将当前页码设置为1
                page: {
                    curr:1
                }
            })


        });

    });
</script>

</body>
</html>
